<template>
	<navigation-custom title="首页"></navigation-custom>
	<swiper @change="swiperChange" next-margin='90rpx' previous-margin='90rpx' indicator-dots autoplay circular
		:interval="3000" :duration="1000" indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#fff">
		<swiper-item v-if="bannerList.length != 0" v-for="(item, index) in bannerList" :key="index">
			<!-- :src="item.url" -->
			<image @click="goToPreview($event, index, bannerList, 'image')" :src="item.url" mode="aspectFill"
				:class="index === swiperCurrent ? '':'lessen'"></image>

		</swiper-item>
		<swiper-item v-else v-for="(item,index) in 4" :key="item">
			<image src="" mode="aspectFill" :class="index === swiperCurrent ? '':'lessen'"></image>
		</swiper-item>
	</swiper>

	<block-item v-for="(item,index) in homeData" :key="item.categoryId"
		:categoryId="item.categoryId" :fx="item.direction" :skeleton='true' :title="item.title"
		:imageList="imageListArr[index]">
	</block-item>

</template>

<script setup>
	const cloudObj = uniCloud.importObject("wallpaper-client")

	import { setTabBarBadge } from '@/utils/client.js'
	import {
		getImage_api,
		getImage_acg,
		getImage_cos,
		getVideo
	} from '@/api/apis.js'
	import {
		onLoad,onShow
	} from '@dcloudio/uni-app'
	import {
		ref
	} from 'vue'
	import {
		unique
	} from '@/utils/common.js'
	import goToPreview from '@/utils/goToPreview.js'

	const imageListArr = ref([])
	const homeData = ref([])
	onLoad(async () => {
		getHomeData()
		getBannerList()
	
	})
	onShow(() => {
		setTabBarBadge()
	})
	const getHomeData = async () => {
		const res = await cloudObj.getHomeData()
		console.log('homedata数据',res);
		homeData.value = res
		for (let i = 0; i < res.length; i++) {
			imageListArr.value[i] = await cloudObj.getSortList(res[i].categoryId, res[i].direction, res[i].imgCount)
		}
	}
	// 当前显示的轮播图索引
	const swiperCurrent = ref(0)
	// 轮播图切换事件
	const swiperChange = (e) => {
		swiperCurrent.value = e.detail.current
	}

	// 轮播图列表
	const bannerList = ref([
		{
			url:'https://ycdn.izday.top/iUpload/discover/post_68526b7d80308.jpeg'
		},
		{
			url:'https://ycdn.izday.top/iUpload/discover/post_68526b7d80308.jpeg'
		},
		{
			url:'https://ycdn.izday.top/iUpload/discover/post_68526b7d80308.jpeg'
		}
	])
	const getBannerList = async () => {
		// bannerList.value = await cloudObj.getBannerList()
		console.log('轮播图列表',bannerList.value);
	}
</script>


<style lang="scss" scoped>
	swiper {
		width: 686rpx;
		height: 280rpx;
		margin: 32rpx auto;

		swiper-item {
			height: 100%;
			width: 562rpx;

			image {
				height: 100%;
				width: 100%;
				// border: 1px solid $text-font-color-4;
				border-radius: 30rpx;
				transition: all 1s;
			}
		}

		.lessen {
			transform: scale(0.85);
		}
	}
</style>